import React, { useEffect, useState } from 'react'
import { Button } from '@nutui/nutui-react'
import { ArrowLeft } from '@nutui/icons-react'
import { useNavigate } from 'react-router-dom'
import AMapLoader from '@amap/amap-jsapi-loader'
import styles from "./MapContainer.css"
export default function Addposition() {
    let map = null;
    useEffect(() => {
        window._AMapSecurityConfig = {
            securityJsCode: "e031f868a4fa4e2e8f0e041ab0d40406",
        };
        AMapLoader.load({
            key: "3009226bcd79b3c1d6fe68c8d0c038d7",                     // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0",              // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.ControlBar", "AMap.HawkEye"],     //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
        }).then((AMap) => {
            //地图加载
            var map = new AMap.Map("container", {
                resizeEnable: true,
                zoom: 10,
            });
            //输入提示
            var autoOptions = {
                input: "tipinput"
            };
            AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.Geolocation'], function () {
                var auto = new AMap.AutoComplete(autoOptions);
                var placeSearch = new AMap.PlaceSearch({
                    map: map
                });  //构造地点查询类
                auto.on("select", select);//注册监听，当选中某条记录时会触发
                function select(e) {
                    placeSearch.setCity(e.poi.adcode);
                    placeSearch.search(e.poi.name);  //关键字查询查询
              
                }
                var geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true,//是否使用高精度定位，默认:true
                    timeout: 10000,          //超过10秒后停止定位，默认：5s
                    position: 'RB',    //定位按钮的停靠位置
                    offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
                    zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
                    needAddress: true    //返回地址描述
                });
          
                geolocation.getCurrentPosition(function (status, result) {
                    if (status == 'complete') {
                        onComplete(result)
                    } else {
                        onError(result)
                    }
                });
                map.addControl(geolocation);
            });
            //解析定位结果
            function onComplete(data) {
                console.log(data.formattedAddress)
            }
            //解析定位错误信息
            function onError(data) {
                console.log(data);
            }
            //鹰眼 粘贴到这里
            var scale = new AMap.Scale({
                visible: true
            })
            var toolBar = new AMap.ToolBar({
                visible: true,
                position: {
                    top: '110px',
                    right: '40px'
                }
            })
            var controlBar = new AMap.ControlBar({
                visible: true,
                position: {
                    top: '10px',
                    right: '10px'
                }
            })
            var overView = new AMap.HawkEye({
                visible: true
            })
            map.addControl(scale);
            map.addControl(toolBar);
            map.addControl(controlBar);
            map.addControl(overView);
            
        }).catch(e => {
            console.log(e);
        })
    }, [])
    return (
        <div className='dizhi'>

<div id="myPageTop">
                    <table>
                        <tr>
                            <td>
                                <label>请输入关键字：</label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input id="tipinput" />
                            </td>
                        </tr>
                    </table>
                    </div>
            <div
                id="container"
                className={styles.container}
                style={{ height: "898px", width: '433px' }}
            ></div>
             <div class='input-card'>
                    <div class="input-item">
                        <input type="checkbox" onclick="toggleScale(this)" />比例尺
                    </div>
 
                    <div class="input-item">
                        <input type="checkbox" id="toolbar" onclick="toggleToolBar(this)" />工具条
                    </div>
 
                    <div class="input-item">
                        <input type="checkbox" id="controlBar" onclick="toggleControlBar(this)" />工具条方向盘
                    </div>
 
                    <div class="input-item">
                        <input type="checkbox" id="overview" checked onclick="toggleOverViewShow(this)" />显示鹰眼
                    </div>
                </div>
        </div>

    )
}
